<!DOCTYPE html "-//W3C//DTD XHTML 1.0 Strict//EN" 
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <title>Google Map</title>
    <script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=abcdefg&sensor=true_or_false"type="text/javascript"></script>
    
	<script type="text/javascript">
	// place a marker in specific location. marker click will open an info window with original traffc image and button.click on this button will change the original image to transform image//
	// and another click buton.click on this button will place the transform image into the correspondin road+ image slideshow  from my harddisk/// 
            var map;
			var a;
			var b;
			var i=0;
			var point;
			var marker;
			var picture_num = 0;
			var pictures=new Array();
			var numImages=9;
			var intervalID;
			
			for (var i1=0; i1<numImages; i1++)
				{
					pictures[i1]=new Image();
					pictures[i1].src="traffic"+(i1+1)+".jpg";
				}

			
			function image_on_road()
				{
					var boundaries = new GLatLngBounds(new GLatLng(43.8367662627843,-79.5474421977996), new GLatLng(43.837100968424195,-79.547180682420));
					var oldmap = new GGroundOverlay("transform_image.jpg", boundaries);
					map.addOverlay(oldmap);
				}
			function place_on_road()
				{
					var boundaries = new GLatLngBounds(new GLatLng(43.8367662627843,-79.5474421977996), new GLatLng(43.837100968424195,-79.547180682420));
					var oldmap = new GGroundOverlay("original_image.jpg", boundaries);
					map.addOverlay(oldmap);
				}
			
			function transform_image()
				{
					var address1='<img src="transform_image.jpg" width=250 height=180/><br/>' + "This is transform image</br>" + '<input type="button" id="btnPrueba" value="place on road" onclick="image_on_road()"/>' ; 
					marker.openInfoWindow(address1); 
				}
			
			function image()
				{
                    var a1='<img src="original_image.jpg" width=250 height=180/><br/>'+ "This is original image<br/>" + '<input type="button" id="btnPrueba" value="transform image" onclick="transform_image()"/>';
				    marker.openInfoWindow(a1);
			    }
				
			function clear_timeinterval()
				{
					clearInterval(intervalID);
				}
	  
            function slideshow() 
				{
					picture_num++;
					/*if (picture_num == pictures.length) 
						{
							picture_num = 0;
						}*/
					var a=pictures[picture_num];
					marker.openInfoWindow(a);
					
				}
			
			function start_show() 
				{
					/*if(picture_num>numImages)
					    {
						    marker.closeInfoWindow();
						}
					else*/
					intervalID=setInterval("slideshow()", 1000);
				}
			
			
			function initialize() 
				{
			
					if (GBrowserIsCompatible()) 
						{
							map = new GMap2(document.getElementById('map_canvas'));
							map.setMapType(G_SATELLITE_MAP);
							map.setCenter(new GLatLng(43.83671305795762,-79.547336250543), 18);
							marker = new GMarker(new GLatLng(43.83671305795762,-79.547336250543));

							GEvent.addListener(marker, 'click', function() 
								{
									var address1= '<input type="button" onClick="myPopup()" value="POP!">';
									var address='<img name="rotating_picture" src="original_image.jpg" width="250" height="180"><br/>' + "This is original image covered by this camera </br>" + '<input type="button" id="btnPrueba" value="transform image" onclick="transform_image()"/>' + '<input type="button" id="btnPrueba" value="slide show" onclick="start_show() "/>' + '<input type="button" id="btnPrueba" value="place on road" onclick="place_on_road()"/>';
									marker.openInfoWindow(address); 
								});

							map.addOverlay(marker);
							var polyline = new GPolyline([
								new GLatLng(43.8367662627843,-79.5474421977996),
								new GLatLng(43.83676723014436,-79.547175318002)], "#ff0000", 5);

							var polyline1 = new GPolyline([
								new GLatLng( 43.837098066360234,-79.54745829105377),
								new GLatLng(43.837100968424195,-79.547180682420)], "#0000FF", 5);

							map.addOverlay(polyline);
							map.addOverlay(polyline1);
							map.setUIToDefault();
						}
				}


    </script>
  </head>
  <body onload="initialize()" onunload="GUnload()">
		<div id="map_canvas" style="width: 1200px; height: 900px"></div>
		<center>
			<img name="rotating_picture" src="traffic0.jpg" width="100" height="100">
        </center>
  </body>
</html>